<template>
    <transition name="fade">
        <div
            v-if="visible"
            class="drawer-wrapper"
        >
            <div class="drawer">
                <p
                    class="confirm"
                    @click="handleGenerate"
                >
                    确认
                </p>
                <div class="esign-box">
                    <vue-esign
                        ref="esign"
                        class="esign"
                        :width="375"
                        :height="200"
                    />
                    <div
                        class="esign-clean"
                        @click="handleReset"
                    ></div>
                </div>
            </div>
        </div>
    </transition>
</template>
<script>
export default {
    name: 'Esign',
    components: {},
    mixins: [],
    props: {
        value: {
            type: Boolean,
            default: false,
        },
        loading: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            visible: this.value,
            bgColor: '#FFF',
        };
    },
    watch: {
        value(val) {
            this.visible = val;
        },
        visible(val) {
            this.$emit('input', val);
        },
    },
    async mounted() {},
    methods: {
        handleReset() {
            this.$refs.esign.reset();
        },
        handleGenerate() {
            // 正在签署
            if (this.loading) return;
            this.$refs.esign
                .generate()
                .then((res) => {
                    this.$emit('on-confirm', res);
                })
                .catch(() => {
                    this.$toast('请签字后确认提交');
                });
        },
    },
};
</script>
<style scoped>
.confirm {
    text-align: right;
    padding-right: 8px;
    margin-top: -8px;
    margin-bottom: 12px;
    font-size: 14px;
    color: #3399ff;
}
.esign-box {
    position: relative;
    width: 100%;
    height: 200px;
    border: dashed 2px #e5f2ff;
    border-radius: 4px;
    background: url('~@/assets/images/icon-sign.png') center 30px,
        url("data:image/svg+xml,%3Csvg width='355' height='28' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='50%25' y='50%25' font-size='18' fill='%23AEBDCC' text-anchor='middle' dominant-baseline='middle'%3E请在这里签名%3C/text%3E%3C/svg%3E")
            center 130px;
    background-color: #fff;
    background-repeat: no-repeat;
    background-size: 96px, auto;
}
.esign-box-bg {
    width: 100%;
    height: 100%;
}
.esign-clean {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #bcdce0 url('~@/assets/images/icon-rubber.png') no-repeat center center;
    background-size: 80% 80%;
}
.drawer-wrapper {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
}
.drawer {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 20px 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-color: #fff;
    transition: all 0.5s;
    background-color: #f7fbff;
}

.fade-enter-active {
    transition: opacity 0.2s;
}

.fade-leave-active {
    transition: opacity 0.2s 0.1s;
}

.fade-enter,
.fade-leave-to {
    opacity: 0;
}

.fade-enter-active .drawer {
    transition: all 0.3s 0.1s;
}

.fade-leave-active .drawer {
    transition: all 0.3s;
}

.fade-enter .drawer,
.fade-leave-to .drawer {
    opacity: 0;
    bottom: -100%;
}
</style>
